import React, {Component} from 'react';
import {
  Modal,
  Form,
  Input,
  Spin,
  Select,
  DatePicker,
  Popconfirm,
  Row,
  Col,
  Button,
  Icon,
  Popover,
  Upload,
  Card,
  message
} from 'antd';
import { hashHistory } from 'dva/router';
import styles from './main.less';
import moment from 'moment'
const FormItem = Form.Item;
const dateFormat = 'YYYY-MM-DD';
const ButtonGroup = Button.Group;

const fs = window.require('fs');
const path = window.require('path');

import _ from 'underscore';

const Option = Select.Option;
const Search = Input.Search;

class _Filter extends Component {
  constructor(props) {
    super(props);

    this.state = {
      products:[]
    };
    let list = []
    let pathname = path.resolve('data/' + this.props.params.md5)
    for (let st of fs.readdirSync(pathname).filter(v => v.length>20 && v.endsWith('.json'))) {
      this.state.products.push(JSON.parse(fs.readFileSync(path.join(pathname, st))))
    }

  }

  componentDidMount() {}
  show(pd){
    Modal.info({
      width:'100%',
      title: <h3>{pd.name}</h3>,
      content: (
        <div>
          <p>{pd.description}</p>
          {pd.images.map(d=>
            <img style={{display:'block',maxWidth:'90%'}}  key={d.localfile} src={'file://'+d.localfile}/>
          )}
        </div>
      ),
      onOk() {},
    });
  }
  render() {

    return (
          <div>
            <Button onClick={e=>hashHistory.goBack()}>返回 列表</Button>
            <Row type="flex" justify="space-around" align="middle" style={{background:'#333'}}>
                {this.state.products.map(pd=>
                  <Col onClick={e=>this.show(pd)} key={pd.origin_url} span={6} alt={pd.description} style={{marginTop:'16px'}}>
                    <Popover content={<p style={{display:'block',width:'300px'}}>{pd.description}</p>} title="介绍">
                    <Card style={{ width: '95%', textAlign: 'center'}}>
                      <div >
                        <img style={{display:'block'}} height="300px" src={'file://'+(pd.images[0]||{}).localfile}/>
                      </div>
                      <div style={{padding:'10px 16px'}}>
                        <h3>{pd.name}</h3>
                        <p style={{color:'#999'}}>{pd.description.slice(0,50)}</p>
                      </div>
                    </Card>
                  </Popover>
                  </Col>
                )}
            </Row>
          </div>

    )
  }
}

export default _Filter;
